<template>
    <div>
        <section class="content-header">
            排班管理&nbsp;/&nbsp;值班安排
        </section>

        <!-- 查询 -->
        <section class="select-body clearfix">
            <div class="col-md-2 clearfix">
                <danwei v-model="selectData.companyId" />
            </div>
            <div class="col-md-2 clearfix">
                <bumen v-model="selectData.deptId" :companyId="selectData.companyId" />
            </div>
            <!-- <div class="col-md-2 clearfix">
                <gangwei v-model="selectData.jobName" :companyId="selectData.companyId" :deptId="selectData.deptId" />
            </div> -->
            <div class="col-md-1 clearfix">
                <button type="button" class="btn btn-primary" style="float:right" @click="getPlanByTimeList">搜索</button>
            </div>
            <div class="col-md-1 clearfix">
                <button type="button" class="btn btn-primary" style="float:right" @click="reset()">重置</button>
            </div>
            <div class="col-md-1 col-md-offset-1 clearfix">
                <router-link :to="{path:'paiban'}">
                    <button type="button" class="btn btn-primary" style="float:right">排班</button>
                </router-link>
            </div>

        </section>

        <!-- table框 -->
        <section class="main clearfix">
            <div class="nav-tabs-custom">
                <!-- 选择月份 -->
                <ul class="nav nav-tabs tab-month">
                    <li style="padding:0">
                        <select class="form-control select2" style="width: 100px;" v-model="selectData.year">
                            <option :value="item" v-for="item in year" :key="item.value">{{item}}年</option>
                        </select>
                    </li>
                    <li :class="{'active':!index}" v-for="(item,index) in month" :key="item.value">
                        <a href="#month" data-toggle="tab" @click="chooseMonth(item)">{{item}}月</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="active tab-pane" id="month">
                        <div class="nav-tabs-custom">
                            <!-- 选择周 -->
                            <ul class="nav nav-tabs">
                                <li ref="nav-tabs1" :class="{'active':!index}" v-for="(item,index) in week" :key="item.value">
                                    <a href="#month" data-toggle="tab" @click="chooseWeek(index)">{{item}}</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="week">
                                    <div class="box">
                                        <div class="box-body">
                                            <!-- table数据 -->
                                            <table id="example" class="table table-bordered table-hover" style="font-size:14px">
                                                <thead style="font-weight:700">
                                                    <tr>
                                                        <td>岗位</td>
                                                        <td>时间</td>
                                                        <td v-for="item in day" :key="item.value">{{item}}</td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-if="tableList.length==0">
                                                        <td colspan="999">暂无数据</td>
                                                    </tr>
                                                </tbody>
                                                <tbody v-for="item1 in tableList" :key="item1.value">
                                                    <tr v-for="(item2,index) in item1.timeList" :key="item2.value">
                                                        <td v-if="index==0" rowspan="4" style="vertical-align: middle">{{item1.jobName}}</td>
                                                        <td style="vertical-align: middle">{{item2.time1}}-{{item2.time2}}</td>
                                                        <td v-for="item3 in item2.dayList" :key="item3.value"><span style="margin:0 5px" v-for="item4 in item3.personList" :key="item4.value">{{item4.name}}</span></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import bumen from "@/components/common/scheduling/bumen.vue";
import danwei from "@/components/common/scheduling/danwei.vue";
import gangwei from "@/components/common/scheduling/gangwei.vue";

export default {
    data() {
        return {
            year: ['2018', '2017', '2016'],
            month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            week: [],
            day: [],
            selectData: {
                // jobName: '',
                deptId: '',
                companyId: '',
                year: '2018',
                month: '1',
                week: '1'
            },
            tableList: [],
        };
    },
    components: {
        bumen,
        danwei,
        gangwei
    },
    mounted() {
        this.selectWeek()
    },
    methods: {
        //选择月份
        chooseMonth(item) {
            this.selectData.month = item;
            this.selectData.week = 1
            $(this.$refs['nav-tabs1'][0]).find('a').trigger('click')
            this.selectWeek()
            this.getPlanByTimeList()
        },
        //选择周
        chooseWeek(index) {
            index++;
            this.selectData.week = index;
            this.selectWeek()
            this.getPlanByTimeList()
        },

        //当前是几几年
        getYear() {
            var date = new Date;
            var year = date.getFullYear();
            return date;
        },
        //得到当前年月的第几周
        getWeek(year, month, week) {
            // console.log(this.getWeeks(year, month))
            if (this.getWeeks(year, month) == 5) {
                this.week = ['第一周', '第二周', '第三周', '第四周', '第五周']
                // console.log(this.isShow)
            }
            if (this.getWeeks(year, month) == 4) {
                this.week = ['第一周', '第二周', '第三周', '第四周']
                // console.log(this.isShow)
            }
            var monthDay = new Date(year, month, 0).getDate();
            var d = new Date();
            // what day is first day
            d.setFullYear(year, month - 1, 1);
            var w1 = d.getDay();
            if (w1 == 0) w1 = 7;
            // total day of month
            d.setFullYear(year, month, 0);
            var dd = d.getDate();
            var d1 = 0
            // first Monday
            if (w1 != 1) {
                d1 = 7 - w1 + 2
            } else {
                d1 = 1
            };
            var week_count = Math.ceil((dd - d1 + 1) / 7);
            var arr = [];
            for (var i = 0; i < week_count; i++) {
                var weekData = [];
                var monday = d1 + i * 7;
                var sunday = monday + 6;

                for (var j = 0; j < 6; j++) {
                    monday = d1 + i * 7;
                    monday += j
                    if (monday <= monthDay) {
                        var from = year + "年" + month + "月" + monday + "日";
                        weekData.push(from)
                    }
                }
                var to;
                if (sunday <= dd) {
                    to = year + "年" + month + "月" + sunday + "日";
                    weekData.push(to)
                } else {
                    var day2 = [];
                    d.setFullYear(year, month - 1, sunday);
                    for (var k = 1; k <= d.getDate(); k++) {
                        day2.push(d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + k + "日")
                    }
                    // to = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日";
                    for (var key in day2) {
                        weekData.push(day2[key])
                    }
                }
                arr.push(weekData);
            }
            // console.log(arr[week - 1])
            this.day = arr[week - 1]
            // console.log(this.week)
        },
        selectWeek() {
            this.getWeek(this.selectData.year, this.selectData.month, this.selectData.week)
        },
        getWeeks(year, month) {
            var d = new Date();
            // 该月第一天
            d.setFullYear(year, month - 1, 1);
            var w1 = d.getDay();
            if (w1 == 0) w1 = 7;
            // 该月天数
            d.setFullYear(year, month, 0);
            var dd = d.getDate();
            // 第一个周一
            let d1;
            if (w1 != 1) d1 = 7 - w1 + 2;
            else d1 = 1;
            let week_count = Math.ceil((dd - d1 + 1) / 7);
            return week_count;
        },


        //查询
        getPlanByTimeList() {
            this.$api.paiban.planByTimeList(this.selectData).then(res => {
                if (res.success) {
                    this.tableList = res.data.planList
                    console.log(this.tableList);

                }
            });
        },
        //重置查询条件
        reset() {
            this.selectData.jobName = "";
            this.selectData.deptId = "";
            this.selectData.companyId = "";
        },
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.nav-tabs {
  li {
    a {
      padding: 10px 40px;
    }
  }
}
.tab-month {
  li:nth-child(2) {
  }
}
</style>
